<template>
  <a
    :href="href"
    :class="[
      'nes-badge',
      isSplited ? 'is-splited' : '',
      isIcon ? 'is-icon' : '',
    ]"
    :style="badgeStyle"
  >
    <span v-for="(item, i) in texts" :key="i" :class="badgeType[i]">
      {{ item }}
    </span>
  </a>
</template>

<script setup>
import { ref, computed } from "vue";
const props = defineProps({
  href: { type: String, default: "#" },
  types: { type: Array, default: ["primary"] }, // badge类型 primary success warning error dark
  texts: { type: Array, default: ["Yihen"] },
  isSplited: { type: Boolean, default: false }, // 分离badge
  isIcon: { type: Boolean, default: false }, // icon
  width: { type: [String, Number], default: "10.5em" }, // 宽度
  height: { type: [String, Number], default: "1.875em" }, // 高度
});

const badgeType = computed(() => {
  let types = [];
  for (let i = 0; i < props.types.length; i++) {
    types.push("is-" + props.types[i]);
  }
  return types;
});

const badgeStyle = computed(() => {
  let style = {};
  style.width = props.width;
  style.height = props.height;
  return style;
});
</script>

<style  scoped>
</style>